<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<title>element组件2</title>
<style>
/* row行  col列*/

/* 栅格布局 */
.el-row{
margin-bottom: 20px;

}
.el-col{
border-radius: 4px;
}
.content{
border-radius: 4px;
color:wheat;
text-align: center;
line-height: 50px;
background: #7f6a2c;
min-height: 50px;
}

</style>

</head>
<body>
<div id="app">
	<el-row :gutter="5">
		<!-- <el-col :span="8"><div class="content">张三</div></el-col> -->
	<!-- 	<el-col v-for="student in group" :span="6"><div class="content">{{student}}</div></el-col> -->
<!-- 	 <el-col v-for="student in group" :span="24/group.length"><div class="content">{{student}}</div></el-col> -->
	 	 <el-col v-for="student in group" :span="count"><div class="content">{{student}}</div></el-col><!-- 专业点 -->
	</el-row>

</div>
<script>
new Vue({
el:'#app',
data:{
	group:['张三','李四','王五','赵六','孙七'],
},
computed:{
	count:function(){
		// console.log(24/this.group.length);
		 return parseInt(24/this.group.length);  //转化为整数
	}
}

})
</script>
</body>
</html>
